<style lang="less">
.search {
  background-color: #fff;
}
</style>
<template>
  <div class="search">
    <a-row style="position:relative">
      <a-table :loading="loading" rowKey="id"
               :dataSource="data"
               :pagination="ipagination"
               ref="table">
        <a-table-column title="#"  width="50">
          <template slot-scope="t,r,i" >
            <span> {{i+1}} </span>
          </template>
        </a-table-column>
        <a-table-column title="任务名称" dataIndex="name"  width="150" align="center">
          <template slot-scope="t">
            <span> {{t}} </span>
          </template>
        </a-table-column>
        <a-table-column title="处理人" dataIndex="assignees"  width="150" align="center">
          <template slot-scope="t">
            <div v-if="t">
                <span v-for="(item, key) in t" :key="key">
                  <span v-if="item.isExecutor" style="color: #00DB00;">{{item.username}} </span>
                  <span v-else style="color: #999;">{{item.username}} </span>
                </span>
            </div>
          </template>
        </a-table-column>
        <a-table-column title="审批操作" dataIndex="deleteReason"  width="150" align="center">
          <template slot-scope="t">
            <span v-if="t.toString().indexOf('通过')>-1" style="color: #00DB00">{{t}}</span>
            <span v-else-if="t.toString().indexOf('驳回')>-1" style="color: red;">{{t.replace('驳回', '否决')}}</span>
            <span v-else>{{t.toString().indexOf('撤回') > -1 ? '' : t}}</span>
          </template>
        </a-table-column>
        <a-table-column title="审批意见" dataIndex="comment"  width="150" align="center">
          <template slot-scope="text">
            <a-popover title="审批意见">
              <template slot="content">
                <p style="width: 150px;white-space:normal; word-break:break-all;word-wrap:break-word;">{{text}}</p>
              </template>
              <span>
                {{ text | substringApprove}}
              </span>
            </a-popover>
          </template>
        </a-table-column>
        <a-table-column title="耗时" dataIndex="duration"  width="150" align="center">
          <template slot-scope="t">
            <span>{{millsToTime(t)}}</span>
          </template>
        </a-table-column>
        <a-table-column title="创建时间" dataIndex="createTime"  width="150" align="center">
          <template slot-scope="t">
            <span>{{t}}</span>
          </template>
        </a-table-column>
        <a-table-column title="完成时间" dataIndex="endTime"  width="150" align="center">
          <template slot-scope="t">
            <span>{{t}}</span>
          </template>
        </a-table-column>
        <a-table-column title="状态" dataIndex="deleteReason" key="aaa" width="150" align="center">
          <template slot-scope="t">
            <span v-if="t.toString().indexOf('通过')>-1 || t.toString().indexOf('驳回') > -1" style="color: #00DB00">已办理</span>
            <span v-else-if="t.toString().indexOf('撤回')>-1" style="color: red;">已撤回</span>
            <span v-else>待处理</span>
          </template>
        </a-table-column>
      </a-table>
    </a-row>
    <a-card>
      <p slot="title">
        <span>实时流程图</span>
      </p>
      <a-row style="position:relative">
        <img :src="imgUrl" />
        <a-spin size="large" fix v-if="loadingImg"></a-spin>
      </a-row>
    </a-card>

    <a-row>
      <a-col :span="6" :offset="9">
        <a-form-item class="form-item-bt-custom">
          <a-button @click="$emit('update:showChild', false)">返回</a-button>
        </a-form-item>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { historyImgUrl } from '@/config/leave.config'
import { getAction } from '@/api/process'

export default {
  name: 'HistoricDetail',
  props: {
    /**/
    procInstId: {
      type: String,
      default: '',
      required: true
    },
    showChild: {
      type: Boolean,
      default: false
    }
  },
  filters: {
    substringApprove (text = ' ') {
      if (text) {
        if (text.length > 5) {
          return text.substring(0, 5) + '...'
        } else {
          return text
        }
      }
    }
  },
  data() {
    return {
      url:{
        historicFlow:'/actTask/historicFlow/',
        getHighlightImg: historyImgUrl
      },
      type: 0,
      loading: false, // 表单加载状态
      loadingImg: false,
      data: [],
      id: "",
      imgUrl: "",
      backRoute: ""
    };
  },
  created() {
    this.init();
  },
  watch: {
  },
  methods: {
    loadData(){

    },
    init() {
      this.id = this.procInstId;
      this.imgUrl =this.url.getHighlightImg + this.id + "?time=" + new Date();
      this.getDataList();
    },
    getDataList() {
      this.loading = true;
      getAction(this.url.historicFlow+this.id).then(res => {
        this.loading = false;
        if (res.success) {
          this.data = res.result;
          if (!res.result || res.result.length == 0) {
            this.$message.info( "未找到该记录审批历史数据,历史数据可能已被删除");
          }
        }else {
          this.$message.error( res.message);
        }
      });
    },
    millsToTime(mills) {
      if (!mills) {
        return "";
      }
      let s = mills / 1000;
      if (s < 60) {
        return s.toFixed(0) + " 秒"
      }
      let m = s / 60;
      if (m < 60) {
        return m.toFixed(0) + " 分钟"
      }
      let h = m / 60;
      if (h < 24) {
        return h.toFixed(0) + " 小时"
      }
      let d = h / 24;
      if (d < 30) {
        return d.toFixed(0) + " 天"
      }
      let month = d / 30
      if (month < 12) {
        return month.toFixed(0) + " 个月"
      }
      let year = month / 12
      return year.toFixed(0) + " 年"

    },
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      // if (Object.keys(sorter).length > 0) {
      //   this.isorter.column = sorter.field;
      //   this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
      // }
      this.ipagination = pagination;
      // this.loadData();
    },

  },

};
</script>